import { IndexBar, List } from 'antd-mobile'
import { useLoaderData, useParams } from 'react-router-dom'
import styles from '../css/city.module.css'

function CityList(props) {
  const { list } = useLoaderData()
  // 为什么要用 useParams() 而不是 useSearchParams()
  // 通过 useParams() 获取“路径参数”
  const params = useParams()

  return (
    <div className={styles.cityList}>
      <IndexBar>
        {list.map((group) => {
          const { title, items } = group
          return (
            <IndexBar.Panel
              index={title}
              title={`${title}`}
              key={`${title}`}
            >
              <List>
                {items.map((item, index) => (
                  <List.Item
                    key={index}
                    onClick={() => props.saveCity(params.type, item.name)}
                  >
                    {item.name}
                  </List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
  )
}

export default CityList
